<script setup>
import {ref,onMounted} from 'vue'

const option1=ref({
    title:{
        text:"测试第一个图表", //主标题
        subtext:"副标题",
        textStyle:{color:"red"},
        left:40,
        top:10
    },
    tooltip: {
    trigger: 'axis'
  },
 
  toolbox: {
    show: true,
      dataZoom: { //缩放
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false }, //编辑数据
      magicType: { type: ['line', 'bar'] }, //类型切换
      restore: {}, //重置
      saveAsImage: {} //下载
    }
  },
    xAxis: { //x 坐标 横轴
    type: 'category',
    data: ['短袖', '衬衣', 'T恤', '裤子', '裙子', '鞋', '包']
  },
  yAxis: { //y 坐标
    type: 'value'
  },
  series: [ //赋值 y坐标对应的值
    {
      data: [20, 1, 15, 13, 4, 6, 7],
      type: 'line',
      smooth: true
    }
  ]
})

const option2=ref({
 tooltip:{},
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [89, 32, 1, 45, 213, 110, 10],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
})
const option3=ref({
    tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '职员' },
        { value: 735, name: '干部' },
        { value: 580, name: '科长' },
        { value: 484, name: '所长' },
        { value: 300, name: '经理' }
      ]
    }
  ]
})
const option4=ref({
    title: {
    text: 'Stacked Line'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
})
const option5=ref({
    title: {
    text: 'World Population'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
      name: '2012',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
  ]
})
const option6=ref({
    legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
    }
  ]
})
</script>
<template>
    <div>
        <el-row>
            <el-col :span="12">
                <Chart class="analysis1" :option="option1" />
            </el-col>
            <el-col :span="12">
                <Chart  class="analysis2" :option="option2" />
            </el-col>
            <el-col :span="12">
                <Chart class="analysis3" :option="option3" />
            </el-col>
            <el-col :span="12">
                <Chart  class="analysis4" :option="option4" />
            </el-col>
            <el-col :span="12">
                <Chart  class="analysis5" :option="option5" />
            </el-col>
            <el-col :span="12">
                <Chart  class="analysis6" :option="option6" />
            </el-col>
        </el-row>
       
    </div>

</template>

<style scoped>
.analysis1{
    width:100%;
    height:400px;
}
.analysis2{
    width:100%;
    height:400px;
}
.analysis3{
    width:100%;
    height:400px;
}
.analysis4{
    width:100%;
    height:400px;
}
.analysis5{
    width:100%;
    height:400px;
}
</style>